import { useState, useEffect } from 'react';
import { fetchMessageData, fetchMessageItemData } from '@/services/initial';
import { Col, Row, Space, Card, Timeline, Avatar, List, Typography, Empty, theme  } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
const { Text } = Typography;
import style from "./index.less"

export default () => {
  const [chatId, setChatId] = useState('');
  const [chatList, setChatList] = useState([]);
  const [chatInfo, setChatInfo] = useState([]);
  const { token } = theme.useToken();

  //获取对话列表
  const fetchData = async () => {
    const { data = [] } = await fetchMessageData();
    if (data.length) handleClickChatList(data[0].sendingUserId);
    setChatList(data);
  };
  useEffect(() => {
    fetchData();
  }, []);

  //点击对话列表
  const handleClickChatList = (sendingUserId) => {
    setChatId(sendingUserId);
    fetchMessageListData(sendingUserId);
  }

  //获取对话列表详情
  const fetchMessageListData = async (sendingUserId) => {
    const { rows = [] } = await fetchMessageItemData({sendingUserId});
    setChatInfo(rows.reverse())
  }

  return (
    <PageContainer>
      <Row gutter={16}>
        <Col flex="308px">
          <List
            size="small"
            itemLayout="horizontal"
            dataSource={chatList}
            rowKey={record => record.sendingUserId}
            renderItem={(item, index) => (
              <List.Item
                className={{
                  [style.List]: true,
                  [style.activeList]: item.sendingUserId === chatId
                }}
                onClick={() => handleClickChatList(item.sendingUserId)}
              >
                <List.Item.Meta
                  avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                  title={
                    <Space>
                      <Text>{item.receiveUserName}</Text>
                      <Text type="secondary">{item.createTime}</Text>
                    </Space>
                  }
                  description={item.remark}
                />
              </List.Item>
            )}
          />
        </Col>
        <Col flex="auto">
          <Card bordered={true}>
            {
              chatInfo.length ? (
                <Timeline
                  mode='left'
                  items={
                    chatInfo.map(({nickName, remark, createTime, sendingUserId}, index) => {
                      return {
                        children: (
                          <Space direction="vertical">
                            <Space>
                              <Text>{nickName}</Text>
                              <Text type="secondary">{createTime}</Text>
                            </Space>
                            <Text type="secondary">{remark}</Text>
                          </Space>
                        ),
                      }
                    })
                  }
                />
              ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};
